<template>
  <div class="numberformat">
    <div>
      <el-tabs v-model="formatDataInfoCopy.fieldsNewFormat.fieldsNewFormatType" @tab-click="tabClick" :stretch="true" style="height: 150px;">
        <el-tab-pane label="number" name="number">
          <div style="display:flex">
            <div>
              <div>{{$t('custom.component.columns.decimals')}}:</div>
              <el-input style="width:202px" v-model="formatDataInfoCopy.fieldsNewFormat.decimals"></el-input>
            </div>
            <div style="margin-left:10px;display:flex;flex-direction:column;justify-content:space-between;padding-top:10px">
              <el-radio style="display:block" v-model="formatDataInfoCopy.fieldsNewFormat.option" label="regular">{{$t('custom.component.columns.regular')}}</el-radio>
              <el-radio style="display:block;" v-model="formatDataInfoCopy.fieldsNewFormat.option" label="abbreviate">{{$t('custom.component.columns.abbreviate')}}</el-radio>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="%" name="percentage">
          <div>
            <div>{{$t('custom.component.columns.decimals')}}:</div>
            <el-input style="width:202px" v-model="formatDataInfoCopy.fieldsNewFormat.decimals"></el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Prefix" name="currency">
          <div style="display:flex">
            <div style="margin-right:10px">
              <div>{{$t('custom.component.columns.prefix')}}:</div>
              <el-input v-model="formatDataInfoCopy.fieldsNewFormat.prefix"></el-input>
            </div>
            <div>
              <div>{{$t('custom.component.columns.decimals')}}:</div>
              <el-input v-model="formatDataInfoCopy.fieldsNewFormat.decimals"></el-input>
            </div>
            <div style="margin-left:10px;display:flex;flex-direction:column;justify-content:space-between;padding-top:10px">
              <el-radio style="display:block" v-model="formatDataInfoCopy.fieldsNewFormat.option" label="regular">{{$t('custom.component.columns.regular')}}</el-radio>
              <el-radio style="display:block" v-model="formatDataInfoCopy.fieldsNewFormat.option" label="abbreviate">{{$t('custom.component.columns.abbreviate')}}</el-radio>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Custom" name="custom">
          <div>
            <div>Custom:</div>
            <el-input style="width:202px" v-model="formatDataInfoCopy.fieldsNewFormat.custom"></el-input>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="byte" name="byte">00011</el-tab-pane>
        <el-tab-pane label="custom" name="custom">CUSTOM</el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // eslint-disable-next-line vue/no-dupe-keys
    formatDataInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      formatDataInfoCopy: {}
    }
  },
  created () {
    this.open()
  },
  methods: {
    tabClick (val) {
      this.$set(this.formatDataInfoCopy.fieldsNewFormat, 'decimals', 0)
      this.$set(this.formatDataInfoCopy.fieldsNewFormat, 'option', '')
      this.$set(this.formatDataInfoCopy.fieldsNewFormat, 'prefix', '')
      this.$forceUpdate()
    },
    open () {
      if (!this.formatDataInfo.fieldsNewFormat.prefix) {
        this.formatDataInfo.fieldsNewFormat.prefix = ''
      }
      this.formatDataInfoCopy = this._.cloneDeep(this.formatDataInfo)
    },
    save () {
      return this.formatDataInfoCopy
    }
  }
}
</script>

<style scoped lang="scss">

</style>
